<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--引入easyui的样式 -->
<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath }/themes/default/easyui.css">
<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath }/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/demo.css">

<!-- js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui-lang-zh_CN.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="bootstrap/js/jquery-1.7.2.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<title>XXXX物流管理系统</title>
<!-- 对页面进行CSS美化 -->

<style type="text/css">
	/*页面标题*/
	#p
	{
		font-size:42px;
		font-family:"楷体"; 
		margin-top:10px; 
		padding-top:10px;
	}
	/*页面标题区*/
	#d
	{
		background-color:#7FFFD4;
		margin-top:140px;
		margin-bottom:-65px;
	}
	/*整个页面*/
	body
	{
		background-color:#1E90FF;
		font-family:"楷体"; 
	}
	/*按钮面板区*/
	#btnpanel
	{
		background-color:#00FFFF;
	}
	/*按钮*/
	#btn
	{
		margin-left:540px;
	}
	/*版权块*/
	#banquan
	{
		background-color:rgb(44,103,135);		
	}	
	
</style>
</head>

<body>
<script type="text/javascript">

//合并订单录入表格的某行或者某列上的单元格
$(function(){
	
	$('#tb').datagrid({
		onLoadSuccess:function(){
			//合并寄件人那一行上的4列单元格
			var merges = [{
				index:1,
				colspan:4
			}];
			for(var i=0; i<merges.length; i++)
				$('#tb').datagrid('mergeCells',{
					index:merges[i].index,
					field:'oid',//订单ID
					colspan:merges[i].colspan
				});
			//合并收件人那一行上的4列单元格
			var merges = [{
				index:1,
				colspan:4
			}];
			for(var i=0; i<merges.length; i++)
				$('#tb').datagrid('mergeCells',{
					index:merges[i].index,
					field:'otype',//订单类别
					colspan:merges[i].colspan
				});
			//合并货物资料那一列上的6行单元格
			var merges = [{
				index:4,
				rowspan:6
			}];
			for(var i=0; i<merges.length; i++)
				$('#tb').datagrid('mergeCells',{
					index:merges[i].index,
					field:'oid',//订单ID
					rowspan:merges[i].rowspan
				});
			//合并资费情况那一列上的6行单元格
			var merges = [{
				index:4,
				rowspan:6
			}];
			for(var i=0; i<merges.length; i++)
				$('#tb').datagrid('mergeCells',{
					index:merges[i].index,
					field:'otype',//订单类别
					rowspan:merges[i].rowspan
				});
			//合并货物类别的2行3列
			var merges = [{
				index:8,
				rowspan:2,
				colspan:3
			}];
			for(var i=0; i<merges.length; i++)
				$('#tb').datagrid('mergeCells',{
					index:merges[i].index,
					field:'startplace',//收寄地
					rowspan:merges[i].rowspan,				
					colspan:merges[i].colspan				
				});
			//合并发货日后面的3列单元格
			var merges = [{
				index:10,
				colspan:3
			}];
			for(var i=0; i<merges.length; i++)
				$('#tb').datagrid('mergeCells',{
					index:merges[i].index,
					field:'startplace',//收寄地				
					colspan:merges[i].colspan				
				});
			//合并发货车辆后面的3列单元格
			var merges = [{
				index:10,
				colspan:3
			}];
			for(var i=0; i<merges.length; i++)
				$('#tb').datagrid('mergeCells',{
					index:merges[i].index,
					field:'os',//订单类别				
					colspan:merges[i].colspan				
				});
			//合并支付块
			var merges = [{
				index:7,
				rowspan:3,
				colspan:3
			}];
			for(var i=0; i<merges.length; i++)
				$('#tb').datagrid('mergeCells',{
					index:merges[i].index,
					field:'os',//订单状态
					rowspan:merges[i].rowspan,				
					colspan:merges[i].colspan				
				});
	
		}
	});
});

//清空功能
function clearAll()
{
	$('#dg').form('clear');
}
//收寄地的下拉框
$('#startplace').combobox({    
	url:'combobox_data.json',  
    valueField:'id',  
    textField:'text' 
    
}); 
//订单类别的下拉框
$('#otype').combobox({    
	url:'combobox_data.json',  
    valueField:'id',  
    textField:'text'  
    
});  
//订单状态的下拉框
$('#os').combobox({    
	url:'combobox_data.json',  
    valueField:'id',  
    textField:'text'  
    
}); 
//货物类别的下拉框
$('#classes').combobox({    
	url:'combobox_data.json',  
    valueField:'id',  
    textField:'text'     
});
//支付的下拉框
$('#payname').combobox({    
	url:'combobox_data.json',  
    valueField:'id',  
    textField:'text'     
}); 
</script>
<!-- 导航条 -->
	<nav class="navbar navbar-default">
      <div class="container-fluid">
         <div class="navbar-header">
           <a class="navbar-brand" >
            <img alt="Brand" src="${pageContext.request.contextPath }/img/logo.png" />
           </a>
         </div>
      </div>
    </nav>

	<!--页面标题  -->
	<div id="d">
		<p id="p" align="center"><b>XXXX物流配送订单</b></p>
	</div>
	<br>
	
	
	<form id="dg" action="orderinfo" method="post"
	 style="width:100%;height:320px">
	<!--表格 -->	
	<table id="tb" cellpadding="5" border="1">   
    <!-- 第一行的头标题 -->
    
    <thead>   
        <tr>   
            <th data-options="field:'oid',width:'120'" resizable="true">订单ID</th>   
            <th data-options="field:'startplace',width:'120'" resizable="true">收寄地</th>   
            <th data-options="field:'spdate',width:'120'" resizable="true">收寄日期</th>   
            <th data-options="field:'distributionCenter',width:'120'" resizable="true">配送地</th>   
            <th data-options="field:'otype',width:'120'" resizable="true">订单类别</th>   
            <th data-options="field:'os',width:'120'" resizable="true">订单状态</th>   
            <th data-options="field:'note',width:'120'" resizable="true">备注</th>   
            <th data-options="field:'null',width:'120'" resizable="true"></th>   
        </tr>   
    </thead> 

    <!-- 主体部分 -->
	<tbody>
	<!--第二行  -->
    	<tr>
    		<td><input type="text"></input></td>
    		<td>
			   <select id="startplace" field="startplace" style="width:110px">
			   	<option>重庆</option>
			   	<option>上海</option>
			   	<option>北京</option>
			   	<option>福建</option>
			   	<option>宁夏</option>
			   </select> 
			</td>
    		<td><input type="text"></input></td>
    		<td><input type="text"></input></td>
    		<td>
    		   <select id="otype" field="otype" style="width:110px">
			   	<option>快件</option>
			   	<option>普通</option>
			   	<option>急件</option>
			   </select> 
    		</td>
    		<td>
    		   <select id="os" field="os" style="width:110px">
			   	<option>接受</option>
			   	<option>在途</option>
			   	<option>在配送中</option>
			   	<option>客户已收</option>
			   	<option>等待支付</option>
			   </select> 
    		</td>
    		<td><input type="text"></input></td>
    	</tr> 
    	<!--需要合并的第三行的几个列  -->
    	<tr>
    		<td>寄件人资料</td>   		
    		<td></td>
    		<td></td>
    		<td></td>
    		<td>收件人资料</td>
    		<td></td>
    		<td></td>
    		<td></td>
    	</tr>
    	<!--第四行：寄件人和收件人的基本信息  -->	
    	<tr>
    		<!--寄件人 -->
    		<td field="aname">姓名</td>
    		<td field="aphone">电话</td>
    		<td field="aphone2">单位</td>
    		<td field="aaddress">地址</td>
    		<!--收件人 -->
    		<td field="bname">姓名</td>
    		<td field="bphone">电话</td>
    		<td field="bphone2">单位</td>
    		<td field="baddress">地址</td>
    	</tr> 
    	<!--第五行  -->
    	<tr>
    		<!--寄件人 -->
    		<td><input type="text"></input></td>
    		<td><input type="text"></input></td>
    		<td><input type="text"></input></td>
    		<td><input type="text"></input></td>
    		<!--收件人 -->
    		<td><input type="text"></input></td>
    		<td><input type="text"></input></td>
    		<td><input type="text"></input></td>
    		<td><input type="text"></input></td>
    	</tr> 
    	<!--第六行  -->
    	<tr>
    		<td>货物资料</td>
    		<td field="cweight">重量(kg)</td>
    		<td><input type="text"></input></td>
    		<td></td>
    		<td >资费情况</td>
    		<td field="bjmoney">保价金额(￥元)</td>
    		<td><input type="text"></input></td>
    		<td></td>
    	</tr>
    	<!--第七行  -->
    	<tr>  		
    		<td></td>
    		<td field="cvolume">体积(m3)</td>
    		<td><input type="text"></input></td>
    		<td></td>
    		<td></td>
    		<td field="cost">资费(￥元)</td>
    		<td><input type="text"></input></td>
    		<td></td>
    	</tr> 
    	<!--第八行  -->
    	<tr>  		
    		<td></td>
    		<td field="citemname">物品名称</td>
    		<td field="cnumber">数量</td>
    		<td></td>
    		<td></td>
    		<td field="totalcost">总计费用(￥元)</td>
    		<td><input type="text"></input></td>
    		<td></td>
    	</tr> 
    	<!--第九行  -->
    	<tr>  		
    		<td></td>
    		<td><input type="text"></input></td>
    		<td><input type="text"></input></td>
    		<td></td>
    		<td></td>
    		<td>
    		支付:<select id="payname" field="payname" style="width:110px">
			   	<option>寄件人</option>
			   	<option>收件人</option>
			   	<option>第三方支付</option>			   	
			    </select> 
    		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    		支付地:<select id="startplace" field="startplace" style="width:110px">
			   	<option>重庆</option>
			   	<option>上海</option>
			   	<option>北京</option>
			   	<option>福建</option>
			   	<option>宁夏</option>
			    </select>
    		</td>
    		<td></td>
    		<td></td>
    	</tr>
    	<!--第十行  --> 
    	<tr>  		
    		<td></td>
    		<td field="classes">货物类别:
    			<select id="classes" field="classes" style="width:110px">
			   	<option>大件（普货）</option>
			   	<option>小件（普货）</option>
			   	<option>易碎品</option>			   	
			    </select> 
    		</td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    	</tr> 
    	<!--第十一行  -->
    	<tr>  		
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    		<td></td>
    	</tr> 
    	<!--第十二行  -->
		<tr>
			<td field="senddate">发货日</td>
    		<td><input type="text"></input></td>
    		<td></td>
    		<td></td>
    		<td field="cid">发货车辆</td>
    		<td><input type="text"></input></td>
    		<td></td>
    		<td></td>
		</tr>
    </tbody>      
    </table>  
</form>

<!-- 按钮组 -->
<div id="btnpanel">
	<div id="btn">
	<button id="clear" type="button" onclick="clearAll()" class="btn btn-clear" name="clearinfo">清空</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<button>提交</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<button>返回</button>
	</div>
</div>	


<!--版权块-->
<div id="banquan" align="center">
	<p>&copy;<b>XXXX技术有限公司 2016-06-21制作</b></p>
	<p><b>XXICP备11011334号</b></p>
	<p><img src="${pageContext.request.contextPath }/img/jinghui.png"/><b>XX公网安备11010102001811号</b></p>
</div>

</body>
</html>